<!DOCTYPE html>
<html>

<head>
  <title>User Profile - AIL</title>
	<link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png') }}">

  <!-- Core CSS -->
	<link href="{{ url_for('static', filename='css/bootstrap4.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/font-awesome.min.css') }}" rel="stylesheet">
	<link href="{{ url_for('static', filename='css/dataTables.bootstrap.min.css') }}" rel="stylesheet">

  <!-- JS -->
	<script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
	<script src="{{ url_for('static', filename='js/popper.min.js')}}"></script>
	<script src="{{ url_for('static', filename='js/bootstrap4.min.js')}}"></script>
	<script src="{{ url_for('static', filename='js/jquery.dataTables.min.js')}}"></script>
	<script src="{{ url_for('static', filename='js/dataTables.bootstrap.min.js')}}"></script>

</head>
<body>

{% include 'nav_bar.html' %}
	<div class="container-fluid">
		<div class="row">
			{% include 'settings/menu_sidebar.html' %}

			<div class="col-12 col-lg-10" id="core_content">

                <button class="btn btn-lg btn-primary my-4" onclick="printTokens()"><i class="fa-solid fa-print"></i> Print HOTP Tokens</button>

                <span id="token-list">
                    <h1 class="text-center">{{ ail_2fa_name }} <img src="/static/image/AIL.png" alt="AIL" style="width:150px;"> {{ user_id }}</h1>
                    <h3 class="text-center">HOTP - Paper-Based Single Use Tokens</h3>

                    <div class="text-center">If you don’t have access to your phone or authentication app, use the tokens below.</div>
                    <div class="text-center">Print and store them securely for future access.</div>

                    <div class="text-center my-2">
                        {% for code in hotp %}
                            <div><i>{{ code[:-6] }}</i> <b>{{ code[-6:] }}</b></div>
                        {% endfor %}
                    </div>
                </span>

                <button class="btn btn-lg btn-primary my-4" onclick="printTokens()"><i class="fa-solid fa-print"></i> Print HOTP Tokens</button>

    	    </div>
		</div>
	</div>
</body>

<script>
$(document).ready(function(){
  $("#nav_edit_profile").addClass("active");
	//$("#nav_my_profile").removeClass("text-muted");
} );

function printTokens() {
    let printContent = document.getElementById("token-list").innerHTML;
    let originalContent = document.body.innerHTML;

    document.body.innerHTML = printContent;
    window.print();
    document.body.innerHTML = originalContent;
}

function toggle_sidebar(){
	if($('#nav_menu').is(':visible')){
		$('#nav_menu').hide();
		$('#side_menu').removeClass('border-right')
		$('#side_menu').removeClass('col-lg-2')
		$('#core_content').removeClass('col-lg-10')
	}else{
		$('#nav_menu').show();
		$('#side_menu').addClass('border-right')
		$('#side_menu').addClass('col-lg-2')
		$('#core_content').addClass('col-lg-10')
	}
}

</script>

</html>
